<template>
    <div class="pageCon">
        <div class="topBox">
            <van-icon name="arrow-left" class="backIcon" @click="back" />
            <!-- 搜索 -->
            <div class="search-box">
                <div class="search" @click="goTo('/search')">
                    <div class="search-input">输入想要搜索的商品名称</div>
                    <div class="search-icon">
                        <van-icon name="search" />
                    </div>
                </div>
            </div>
        </div>
        <div class="mui-content">
            <!-- 普通专区  -->
            <van-tabs v-model="activeName" swipeable :ellipsis='false' animated offset-top="64">
                <van-tab v-for="(item, index) in specials" :key="index" :title="item.specialName"
                    :name="item.specialId + ''">
                    <div class="clearfix select-content" v-if="item.productList.length !== 0">
                        <div v-for="(product, productIndex) in item.productList" :key="productIndex"
                            @click="toDetail(product.productId)" class="product">
                            <div class="product-img-box">
                                <img :src="alPath + 'zhonghui/product/' + product.productPic">
                            </div>
                            <div class="product-content proContent1" :class="!product.manjianSt ? 'top8' : ''">
                                <div class="product-name">{{ product.productName }}</div>
                                <div class="product-title">{{ product.productTitle }}</div>

                                <div class="specialDelPrice1 specialDelPrice2">
                                    <!-- 会员价 -->
                                    <span class="yuanjia1"><span>￥</span>{{ product.productPrice |
                getPriceFront }}.{{ product.productPrice |
                getPriceEnd }}</span>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div v-else class="none">
                        <div class="noInfoImg">
                            <img class="noInfo" src="../../assets/product/noGoods.png" alt="">
                            <div class="noText">暂无商品</div>
                        </div>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
    </div>

</template>

<script>
import { listSpecials } from '../../network/product'
import { alPath } from "../../network/request";
export default {
    name: 'HomeR',
    data() {
        return {
            alPath,
            activeName: '',
            productList: [],//商品列表
            shop_id: localStorage.shopId == undefined ? 1 : localStorage.shopId,
            user_id: localStorage.userId == undefined ? 0 : localStorage.userId,
            specials: [],
            product: [],


        }
    },
    mounted() {

    },
    methods: {
        getData: function () {

            listSpecials({
            }).then(res => {
                if (res.flag) {

                    console.log(this.activeName);
                    this.specials = res.data
                    console.log(this.specials);


                }
            })

        },
        toDetail: function (product_id) {
            localStorage.product_id = product_id;
            this.$router.push('/detail')
        },
        goTo: function (urls) {
            if (this.ifUserLogin()) {
                this.$router.push(urls)
            }
        },
        ifUserLogin: function () {
            if (this.user_id == 0) {
                this.$router.replace('/wxLogin')
                return false;
            } else {
                return true;
            }
        },

        back() {
            this.$router.go(-1)
        },




    },
    created() {
        this.activeName = localStorage.specialCategroyId == undefined ? 0 : localStorage.specialCategroyId;
        this.getData();

        console.log(this.shop_id);
    },
    //计算属性
    computed: {

    },
    filters: {
        toFixed1: function (value) { //保留一位小数
            return (value * 1).toFixed(1);
        },
        getPriceFront: function (value) { //获取价格整数部分
            return (value * 1).toFixed(2).toString().split(".")[0];
        },
        getPriceEnd: function (value) { //获取价格小数部分
            return (value * 1).toFixed(1).toString().split(".")[1];
        }
    }

}

</script>

<style lang='less' scoped>
body,
.pageCon {
    background: #F2F2F2;
}

div {
    box-sizing: border-box;
}

.search-box {
    // position: absolute;
    // left: 88px;
    // right: 104px;
    flex: 1;
    height: 88px;
    // bottom: 0px;
}

.search {
    position: relative;
    width: 100%;
    height: 56px;
    background: #F2F2F2;
    border-radius: 28px;
    margin-top: 16px;
}

.search .search-input {
    background: transparent;
    padding: 0;
    margin-bottom: 0;
    height: 100%;
    border: none;
    font-size: 28px;
    line-height: 56px;
    padding-left: 24px;
    color: #999;
}

.search-icon {
    position: absolute;
    top: 10px;
    right: 24px;
    color: #999;
    font-size: 36px;
}

.status-icon {
    position: absolute;
    right: 24px;
    width: 64px;
    height: 88px;
    bottom: 4px;
}

.status-icon img {
    display: block;
    width: 48px;
    height: 48px;
    margin-top: 28px;
    margin-left: 8px;
}

.select-content {
    box-sizing: border-box;
    height: 100vh;
    height: -webkit-calc(100vh - 104px);
    // height: 100vh;
    overflow-y: scroll;
    padding: 24px;
}

.product {
    float: left;
    width: 49%;
    background: #FFF;
    border-radius: 16px;
    margin-right: 2%;
    margin-bottom: 2%;
}

.product:nth-child(2n) {
    margin-right: 0;
}

.product-img-box {
    position: relative;
    width: 100%;
    padding-top: 100%;
}

.product-img-box img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 16px 16px 0 0;
}

.product-price {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 24px;
    color: #999;
    line-height: 1;
    padding-top: 12px;
}

.card-res {
    position: relative;
    font-size: 24px;
    background-color: #ff3b14;
    height: 32px;
    line-height: 32px;
    color: #fff;
    border-radius: 4px 4px 24px 4px;
    left: -16px;
    padding: 0 24px 0 20px;
    font-weight: 400;
    margin-top: 12px;
    box-sizing: border-box;
    width: 168px;
}

.product-price-red {
    font-weight: bold;
    color: #FF3B14;
    margin-right: 12px;
}

.product-price-red .big {
    font-size: 32px;
}

.product-content {
    width: 100%;
    position: relative;
    padding: 34px 16px 32px 16px;
}

.product-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 24px;
    color: #666;
    line-height: 28px;
}

.product-name {
    line-height: 32px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 28px;
    line-height: 1.2;
    margin-bottom: 8px;
}

.clearfix {
    zoom: 1;
}

.clearfix::after {
    content: "\20";
    display: block;
    height: 0;
    clear: both;
}

.content-tip {
    display: block;
    width: 316px;
    margin: 100px auto;
}

.product.mode-line {
    position: relative;
    width: 100%;
    height: 240px;
    margin-right: 0;
    padding-left: 224px;
}

.mode-line .product-img-box {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 208px;
    height: 208px;
    padding-top: 0;
}

.mode-line .product-img-box img {
    border-radius: 16px;
}

.mode-line .product-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    height: 100%;
}

.mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .4);
}

.mask img {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-top: -50px;
    margin-left: -50px;
}

.none {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 256px;
    font-size: 24px;
    color: #999;
}

.noInfoImg {
    text-align: center;
}

.noInfo {
    width: 344px;
}

div {
    box-sizing: border-box;
}

.noText {
    margin: 0 auto;
}

.yellow-price {
    position: absolute;
    right: 0;
    top: -8px;
    line-height: 48px;
    background-color: #282828;
    color: #E5CC9E;
    height: 48px;
    border-radius: 48px 0 0 0;
    box-sizing: border-box;
    padding: 2px 8px 0 36px;
}

.yellow-price::before {
    position: absolute;
    content: '￥';
    font-size: 24px;
    left: 16px;
    height: 100%;
    box-sizing: border-box;
    padding-top: 4px;
}

.yellow-price span {
    font-size: 32px;
    font-weight: bold;
}

.yellow-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    font-size: 24px;
    font-weight: 500;
    box-sizing: border-box;
    padding-left: 16px;
    color: #282828;
    line-height: 40px;
    background: linear-gradient(90deg, #E9D3A9, #D3AD72);
    border-radius: 0 0 0 16px;
}

.products {
    position: relative;
    padding: 0px 0px 0px 240px;
    height: 240px;
    margin-bottom: 24px;
    box-shadow: 0px 4px 16px 0px rgba(94, 94, 94, 0.2);
    border-radius: 16px;
    overflow: hidden;
}

.products div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.products img {
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 16px 0 0 16px;
    left: 0;
    top: 0;
    display: block;
}

.products>div:nth-child(2) {
    font-size: 28px;
    line-height: 32px;
    padding: 20px 24px 0 16px;
}

.products>div:nth-child(3) {
    font-size: 24px;
    line-height: 28px;
    color: #666;
    padding: 8px 24px 8px 16px;
}

.products>div:nth-child(4) {
    color: #282828;
    font-size: 24px;
    font-weight: bold;
    height: 40px;
    line-height: 40px;
    background: linear-gradient(90deg, #E9D3A9, #D3AD72);
    padding-left: 72px;
    box-sizing: border-box;
}

.title-tag {
    position: relative;
    font-size: 24px;
    background-color: #ff3b14;
    height: 32px;
    line-height: 32px;
    color: #fff;
    border-radius: 4px 4px 24px 4px;
    left: 0;
    padding: 0 24px 0 20px;
    font-weight: 400;
    margin-top: 12px;
    box-sizing: border-box;
    width: 168px;
}

.black-price {
    position: absolute;
    height: 40px;
    line-height: 40px;
    background-color: #282828;
    color: #E5CC9E;
    right: 0;
    top: 96px;
    font-size: 20px;
    padding: 2px 24px 0 20px;
    box-shadow: -4px -2px 8px 0px rgba(79, 51, 6, 0.39);
}

.black-price span {
    font-size: 32px;
    font-weight: bold;
}

.p12px {
    padding: 16px 24px 0 24px;
}

.top8 {
    padding-top: 16px !important;
}

.top18 {
    margin-top: 36px !important;
}

.btm8 {
    margin-bottom: 16px;
}

.topBox {
    position: sticky;
    z-index: 2299;
    width: 100%;
    top: 0;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 2px #dcdcdc;
    padding: 20px 20px 10px;
}

.backIcon {
    margin-right: 24px;
    font-size: 48px;
    color: #333;
}




.proContent1 {
    padding-top: 20px !important;
}






.specialDelPrice1 {
    position: relative;
    top: 0px;
    font-size: 32px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #CCCCCC;
}

.specialDelPrice2 {
    top: 20px;
}

.yuanjia1 {
    color: #ED0A2B;
    font-size: 28px;
    font-weight: bold;
}




.yuanjia1 span:first-child {
    font-size: 24px;
}

.specialDelPrice1 del {
    font-size: 24px;
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
}
</style>